// @ts-nocheck
import React, { FC, useState, useEffect, useMemo } from "react";
import {
  NavBar,
  Button,
  Form,
  Input,
  Cascader,
  TextArea,
  ImageUploader,
  Toast,
} from "antd-mobile";
import { Spin } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
// service
import {
  putEventReportByFromData,
} from "./service";
import { getCurrentUser } from "@/utils/authority";
import { eventRegistration } from "../service";
import { HandOk } from "@/components";

// style
import "./index.less";

interface IFormState {
  activityId: string;
  name: string;
  phone: string;
  idCard: string[];
}

interface IStartFormState {
  activityId: string;
  name: string;
  phone: string;
  idCard: string;
}

function EventReport() {
  const userId = getCurrentUser()?.data?.user_id;
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const location = useLocation();
  const [loaing, setLoaing] = useState(false);
  const [users, setUsers] = useState({})
  const [articleType, setArticleType] = useState("")//文章类型
  const [articleId, setArticleId] = useState("")//文章id
  useEffect(() => {
    const [type, detail] = location?.search?.substring(1).split("&&")
    setArticleId(detail.split("=")?.[1]);
    setArticleType(type.split("=")?.[1])
  }, [location])
  const onFinish = async (values: IFormState) => {
    // setLoaing(true);
    const formCommitData: IStartFormState = {
      activityId: articleId,
      name: values?.name,
      phone: values?.phone,
      idCard: values?.idCard,
    };
    try {
      const parma = formCommitData;
      const { success } = await eventRegistration(parma);
      if (!success) {
        Toast.show({
          icon: "fail",
          content: "报名失败",
        });
        setLoaing(false);
        return;
      }
      if (success) {
        setLoaing(false);
        Toast.show({
          icon: "success",
          content: "报名成功",
        });
        navigate(`/activityOrTraining?type=activity`);
      }
    } catch (err) {
      console.error(err);
    }
  };


  useEffect(() => {
    const formItem = JSON.parse(
      localStorage.getItem("form") || JSON.stringify("")
    );
    form.setFieldsValue(formItem);
    return () => {
      localStorage.removeItem("form");
      form.resetFields();
    };
  }, []);
  useEffect(() => {
    const users = JSON.parse(
      localStorage.getItem("users") || JSON.stringify({})
    );
    setUsers(users)
  }, [localStorage]);


  return (
    <Spin tip="提交中..." spinning={loaing}>
      <div className="reportcontent">
        <div>
          <NavBar
            onBack={() => navigate(`/eventDetails?type=${articleType}&&detail=${articleId}`)}
          >
            <div className="commontitle">事件上报</div>
          </NavBar>
        </div>

        <div className="eventFrom">
          {users?.account ? <Form form={form} onFinish={(data) => { onFinish(data) }}
            initialValues={{
              phone: users?.account || "",
              name: users?.real_name || "",
              idCard: users?.idCard || "",
            }}
          >
            <Form.Item
              name="name"
              label="姓名"
              disabled={true}
            >
              <Input placeholder="" />
            </Form.Item>
            <Form.Item
              name="idCard"
              label="身份证"
              disabled={true}
            >
              <Input placeholder="" />
            </Form.Item>
            <Form.Item
              name="phone"
              label="联系电话"
              disabled={true}
            >
              <Input placeholder="" />
            </Form.Item>
            <div className="bottomButton">
              <Button
                onClick={(e) => {
                  if (!loaing) {
                    e.preventDefault();
                    form.submit();
                  }
                }}
                type="submit"
                className="reportbtn "
                style={{ fontSize: "1.5rem" }}
              >
                {loaing ? "提交中" : "提交"}
              </Button>
            </div>
          </Form> : null}
        </div>
      </div>
    </Spin>
  );
}

export default EventReport;
